<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets" template="/home.xhtml">
	<ui:define name="corpo">
		<h:form prependId="false">
			<p:panel header="Área do paciente" style="background: #dbfbda;font-size:15px;min-height:700px;margin-top:10px;float:left;width:99%">
				<h:panelGroup style="float: left;width:250px;" layout="block">
					<ui:include src="menu_esquerda.xhtml" />
				</h:panelGroup>
				<h:panelGroup layout="block" style="float:left">
					<p:panel header="Marcação de consultas" style="width:680px">
						
						<h:panelGrid columns="4" cellspacing="4">
							
							<h:outputLabel value="Selecione tipo de consulta:" />
							<h:selectOneMenu value="#{marcacaoConsultaPacienteBean.form.tipoConsulta}" requiredMessage="Campo obrigatório" id="tipoConsulta" required="#{!empty param['btConsultas']}">
								<f:selectItem itemLabel="" noSelectionOption="true"/>
								<f:selectItems value="#{marcacaoConsultaPacienteBean.form.tipoConsultas}" var="entity" itemValue="#{entity}" itemLabel="#{entity.tipoConsulta}" />
								<f:converter converterId="convertEntity" />
							</h:selectOneMenu>
							
							<h:outputLabel value="Área médica:" />
							<h:selectOneMenu value="#{marcacaoConsultaPacienteBean.form.areaMedica}" id="areaMedica" required="#{!empty param['btConsultas']}" requiredMessage="Campo obrigatório">
								<f:selectItem itemLabel="" noSelectionOption="true"/>
								<f:selectItems value="#{marcacaoConsultaPacienteBean.form.areasMedicas}" var="entity" itemLabel="#{entity.areaMedica}" itemValue="#{entity}" />								
							</h:selectOneMenu>
							
							<h:outputText />
							<h:message for="tipoConsulta" style="font-size:10px;color:red" id="msgTipoConsulta" />
							<h:outputText />
							<h:message for="areaMedica" style="font-size:10px;color:red" id="msgAreaMedica" />
							
						</h:panelGrid>
						<h:panelGroup layout="block" style="text-align:center">
							<p:commandButton value="Buscar consutlas" id="btConsultas" action="#{marcacaoConsultaPacienteBean.buscarConsultas}" update="msgTipoConsulta,msgAreaMedica,tabelaConsultas" />
						</h:panelGroup>
						
						<h:panelGroup layout="block" style="margin-top:20px">
							<p:dataTable id="tabelaConsultas" value="#{marcacaoConsultaPacienteBean.form.consultas}" selectionMode="single" var="entity" paginator="true" rows="10" emptyMessage="Nenhuma consulta disponível"
				                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" 
				                 paginatorPosition="bottom">
				                 <f:facet name="header">
				                 	<h:outputText style="text-align:left" value="Consultas para marcação" />
				                 </f:facet>
								<p:column>
									<f:facet name="header">
										<h:outputText value="Rsultados de :" style="float:left;font-weight:bold" />
										<p:spacer width="2" style="float:left" />
				                 		<h:outputText style="float:left" value="#{marcacaoConsultaPacienteBean.form.areaMedica.areaMedica}" />
				                 	</f:facet>
									<h:panelGroup layout="block" style="width:500px;">

										<h:panelGroup style="float:left">
											<h:outputText value="#{entity.medico.nome}" style="font-size:14px;font-weight:bold;color:#656765" />
											<br />
											<h:outputText value="CRM: " styleClass="fmtCampoConsulta"/>
											<h:outputText value="#{entity.medico.crm}" />
											<br />
											<h:outputText value="E-mail: " styleClass="fmtCampoConsulta" />
											<h:outputText value="#{entity.medico.email}" style="font-style: italic;" />
										</h:panelGroup>
										
										<h:panelGroup style="float:right">
											<h:outputText value="Data da consulta: " styleClass="fmtCampoConsulta" />
											<h:outputText value="#{entity.dataConsulta}">
												<f:convertDateTime pattern="dd/MM/yyyy" locale="pt_BR" timeZone="GMT-3" />
											</h:outputText>
											<br />
											<h:outputText value="Horário: " styleClass="fmtCampoConsulta" />
											<h:outputText value="#{entity.dataConsulta}">
												<f:convertDateTime pattern="HH:mm" locale="pt_BR" timeZone="GMT-3" />
											</h:outputText>
											<br />
											<h:outputText value="Minha consulta" style="color:#CBBA22;font-weight: 700;text-decoration: none;" rendered="#{marcacaoConsultaPacienteBean.getStatusConsulta(entity) eq 'USER_CURRENT'}" />
											<h:outputText styleClass="indisp" value="Indisponível" rendered="#{marcacaoConsultaPacienteBean.getStatusConsulta(entity) eq 'INDISP'}" />
											<p:commandLink styleClass="disp" style="color:#41B43C" oncomplete="modalConsulta.show();" action="#{marcacaoConsultaPacienteBean.addConsultaSelecionada(entity)}" update="pnlConfirmaConsulta" rendered="#{marcacaoConsultaPacienteBean.getStatusConsulta(entity) eq 'DISP'}">Disponível</p:commandLink>
										</h:panelGroup>
									</h:panelGroup>
								</p:column>
						
							</p:dataTable>
						</h:panelGroup>
					</p:panel>    	
				</h:panelGroup>
			 
			</p:panel>
			
		</h:form>
		
		<p:dialog header="Marcação de consulta" widgetVar="modalConsulta" resizable="false" modal="true" width="320" showEffect="clip" hideEffect="fold">
			<h:form prependId="false">
				<h:panelGroup id="pnlConfirmaConsulta">
					<h:panelGroup layout="block" style="text-align:center;border:1px dashed #D72B1D;">
						<h:outputText value="Aviso!" style="color:#E1DD14;font-weight:bold;font-size:14px" />
						<br />
						<h:outputText style="font-size:9px" value="Após a confirmação da consulta, a mesma só poderá ser cancelada 24 horas antes do atendimento." />
					</h:panelGroup>
					<h:panelGrid columns="4" style="width:100%;margin-top:10px;border:1px dashed #33A32F;">
						<h:outputText value="Dr(a):" style="font-weight:bold" />
						<h:outputText value="#{marcacaoConsultaPacienteBean.form.consultaSelecionada.medico.nome}" style="font-weight:bold;color:#656765" />
						
						<h:outputText value="Data:" style="font-weight:bold" />
						<h:outputText value="#{marcacaoConsultaPacienteBean.form.consultaSelecionada.dataConsulta}" style="font-size:11px">
							<f:convertDateTime pattern="dd/MM/yyyy" locale="pt_BR" timeZone="GMT-3" />
						</h:outputText>
						
						<h:outputText value="Área:" style="font-weight:bold" />
						<h:outputText value="#{marcacaoConsultaPacienteBean.form.consultaSelecionada.medico.areaMedica.areaMedica}" style="font-size:11px" />
						
						<h:outputText value="Horário:" style="font-weight:bold" />
						<h:outputText value="#{marcacaoConsultaPacienteBean.form.consultaSelecionada.dataConsulta}" style="font-size:11px">
							<f:convertDateTime pattern="HH:mm" locale="pt_BR" timeZone="GMT-3" />
						</h:outputText>
					</h:panelGrid>
					<h:panelGroup layout="block" style="text-align:center;margin-top:10px;">
						<p:commandButton value="Marcar consulta" style="font-size:11px" action="#{marcacaoConsultaPacienteBean.marcarConsulta}" update="pnlInfo,formModalConfirm" oncomplete="modalConsulta.hide();confirmacaoDialog.show();" />
						<p:commandButton value="Cancelar" onclick="modalConsulta.hide()" style="font-size:11px" />
					</h:panelGroup>
				</h:panelGroup>
				
			</h:form>
		</p:dialog>
		
		<p:dialog header="Aviso" widgetVar="confirmacaoDialog" resizable="false" modal="true" width="320" showEffect="clip" hideEffect="fold">
			<h:form id="formModalConfirm" prependId="false">
				<h:panelGroup layout="block" id="pnlInfo" style="text-align:center">
					<h:outputText value="#{marcacaoConsultaPacienteBean.form.cadastrado ? 'Consulta marcada com sucesso!' : 'Horário indisponível, outro paciente já marcou!'}" styleClass="#{marcacaoConsultaPacienteBean.form.cadastrado ? 'sucesso_consulta' : 'erro_consulta'}" />
					<br />
					<br />
					<p:commandButton value="OK" update="tabelaConsultas" action="#{marcacaoConsultaPacienteBean.buscarConsultas}" oncomplete="confirmacaoDialog.hide();"  />
				</h:panelGroup>
			</h:form>
		</p:dialog>
	</ui:define>
</ui:composition>